.primaryContainer {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 100%;
    background-image:url("img/mockup1.jpg");
    background-attachment: scroll;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 0% 0%;
    background-repeat: no-repeat no-repeat;
}

#image1 {
    float: none;
    width: 26%;
    max-width: 46.981%;
    height: auto;
    margin-left: auto;
    margin-top: 10%;
    clear: none;
    color: #000;
    margin-right: 6%;
}

#image2 {
    float: left;
    width: auto;
    max-width: 10%;
    height: auto;
    margin-left: 68.764%;
    margin-top: 1.24152%;
    clear: none;
    color: #000;
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
}

#image3 {
    float: left;
    width: auto;
    max-width: 10%;
    height: auto;
    margin-left: 4%;
    margin-top: 1.30915%;
    clear: none;
    color: #000;
    position: relative;
    top: 0px;
    left: 0px;
display: block;
}


#image {
   float: none;
    width: auto;
    max-width: 14%;
    height: auto;
    margin-top: 0px;
    clear: none;
    color: #000;
    margin-right: auto;
    left: 0px;
    position: absolute;
    top: 0px;
    margin-left: 7%;
}

#image4 {
   float: none;
    width: auto;
    max-width: 20%;
    height: auto;
    margin-top: 0px;
    clear: none;
    color: #000;
    margin-right: auto;
    left: 0px;
    position: absolute;
    margin-left: 6%;
    top: 20%;
}

#image5 {
    float: none;
    width: 8%;
    max-width: 24%;
    height: auto;
    margin-top: 0px;
    clear: none;
    color: #000;
    margin-right: auto;
    left: 0px;
    position: absolute;
    margin-left: 77%;
    top: 89%;
}


#image2:hover {
    opacity: 0.9;
}

#image2:active {
    opacity: 0.9;
}

#image2:focus {
    opacity: 0.9;
}

#image3:hover {
    opacity: 0.9;
}

#image3:active {
    opacity: 0.9;
}

#image3:focus {
    opacity: 0.9;
}

@media only screen and (max-width: 1100px) {
    #image1 {
        float: none;
        width: auto;
        max-width: 49.981%;
        height: auto;
        margin-left: auto;
        margin-top: 52%;
        clear: none;
        color: rgb(0, 0, 0);
        margin-right: auto;
    }

    #image2 {
        float: left;
        width: auto;
        max-width: 10.642883%;
        height: auto;
        margin-left: 29.764307%;
        margin-top: 1.241517%;
        clear: none;
        color: rgb(0, 0, 0);
        position: relative;
        top: 0px;
        left: 0px;
        display: block;
    }

    #image3 {
        float: left;
        width: auto;
        max-width: 10.640591%;
        height: auto;
        margin-left: 18.928833%;
        margin-top: 1.309153%;
        clear: none;
        color: rgb(0, 0, 0);
        position: relative;
        top: 0px;
        left: 0px;
        display: block;
    }
    
      #image4 {
        float: none;
        width: auto;
        max-width: 40%;
        height: auto;
        margin-top: 0px;
        clear: none;
        color: #000;
        margin-right: auto;
        left: 0px;
        position: absolute;
        margin-left: 32%;
        top: 13%;
    }
    #image {
        float: none;
        width: auto;
        max-width: 25%;
        height: auto;
        margin-top: 0px;
        clear: none;
        color: #000;
        margin-right: auto;
        left: 0px;
        position: absolute;
        margin-left: 5%;
        top: 4%;
    }
    


    #image2:hover {
        opacity: 0.9;
    }

    #image2:active {
        opacity: 0.9;
    }

    #image2:focus {
        opacity: 0.9;
    }

    #image3:hover {
        opacity: 0.9;
    }

    #image3:active {
        opacity: 0.9;
    }

    #image3:focus {
        opacity: 0.9;
    }
}